<template>
    <VueDraggable v-model="items" target=".ant-list-items" :animation="250" :delay="150" handle=".handle">
         <List :data-source="items">
            <template #renderItem="{item}">
                <ListItem>
                    <ListItemMeta>
                        <template #avatar>
                            <MenuOutlined class="handle" />
                        </template>
                        <template #title>
                            <span>{{ item.name }}</span>
                        </template>
                    </ListItemMeta>
                </ListItem>
            </template>
         </List>
    </VueDraggable>
</template>
<script setup lang="ts">
import {VueDraggable} from 'vue-draggable-plus'
import {ref} from 'vue';
import { List,ListItem,ListItemMeta } from 'ant-design-vue';
import { MenuOutlined } from '@ant-design/icons-vue';
const items = ref([
    {name:'李子1',age:1},
    {name:'李子2',age:1},
    {name:'李子3',age:1},
    {name:'李子4',age:1},
    {name:'李子5',age:1},
    {name:'李子6',age:1},
])


</script>
<style scoped>
.handle {
    min-width:30px;
    cursor:move;
    height: 100%;
    text-align: center;
    max-width: 120;
}
</style>